<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <%@include file="/WEB-INF/includes/css-file.jsp" %>
    <link rel="stylesheet" href="${ctp}/static/css/main.css">
    <style>
        .tree li {
            list-style-type: none;
            cursor: pointer;
        }

        table tbody tr:nth-child(odd) {
            background: #F4F4F4;
        }

        table tbody td:nth-child(even) {
            color: #C00;
        }
    </style>
</head>

<body>
<%
    // 设置导航条上的显示
    pageContext.setAttribute("navInfo", "角色维护2");
    // 设置点击高亮效果
    pageContext.setAttribute("curUrl", "permission/role/list2");
%>
<%@include file="/WEB-INF/includes/navbar.jsp" %>
<div class="container-fluid">
    <div class="row">
        <%@include file="/WEB-INF/includes/sidebar_menu.jsp" %>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form" style="float:left;">
                        <div class="form-group has-feedback">
                            <div class="input-group">
                                <div class="input-group-addon">查询条件</div>
                                <input id="searchParamInput" class="form-control has-success" type="text"
                                       placeholder="请输入查询名称">
                            </div>
                        </div>
                        <button id="searchBtn" type="button" class="btn btn-warning"><i
                                class="glyphicon glyphicon-search"></i> 查询
                        </button>
                    </form>
                    <button type="button" class="btn btn-danger" style="float:right;margin-left:10px;"><i
                            class=" glyphicon glyphicon-remove"></i> 删除
                    </button>
                    <button type="button" class="btn btn-primary" style="float:right;" id="addBtn"><i
                            class="glyphicon glyphicon-plus"></i> 新增
                    </button>
                    <br>
                    <hr style="clear:both;">
                    <div class="table-responsive">
                        <table class="table  table-bordered">
                            <thead>
                            <tr>
                                <th width="30">#</th>
                                <th width="30"><input type="checkbox"></th>
                                <th>名称</th>
                                <th width="100">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="6" align="center">
                                    <ul class="pagination">
                                    </ul>
                                </td>
                            </tr>

                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<%-- 新增模态框 --%>
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="saveModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="saveModalLabel">添加角色</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="addNameInput">角色名称</label>
                    <input type="text" class="form-control" id="addNameInput" name="name" placeholder="请输入角色名称">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<%-- 修改模态框 --%>
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="updateModalLabel">修改角色</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="updateNameInput">角色名称</label>
                    <input type="text" class="form-control" id="updateNameInput" name="name" placeholder="请输入角色名称">
                    <input type="hidden" name="id">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="updateBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<%@include file="/WEB-INF/includes/js-file.jsp" %>
<%@include file="/WEB-INF/includes/common-js.jsp" %>
<script type="text/javascript">
    $(function () {
        $(".list-group-item").click(function () {
            if ($(this).find("ul")) {
                $(this).toggleClass("tree-closed");
                if ($(this).hasClass("tree-closed")) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
        initDate(1);
    });

    var dateJson = {
        pageNum: 1,
        pageSize: 2,
    };

    function initDate(pageNum) {
        dateJson.pageNum = pageNum;
        // console.log(dateJson);
        // 发起ajax请求，获取分页数据
        var index = -1;
        $.ajax({
            type: "post",
            url: "${ctp}/permission/role/loadData",
            data: dateJson,
            beforeSend: function () {
                index = layer.load(0, {time: 10 * 1000});
                return true;
            },
            success: function (result) {
                layer.close(index);
                // console.log(result);
                // initShow(result);
                initShow2(result)
                initNavigate(result);
            }
        })
    }

    // 展示数据
    // 字符串的方式拼数据
    function initShow(result) {
        $("tbody").empty();
        var content = '';
        $.each(result.list, function (index, element) {
            content += '<tr>';
            content += '<td>' + (index + 1) + '</td>';
            content += '<td><input type="checkbox"></td>';
            content += '<td>' + element.name + '</td>';
            content += '<td>';
            // <button>前的空格是需要的，否则这三个按钮会紧挨着
            content += '    <button type="button" class="btn btn-success btn-xs"><i class=" glyphicon glyphicon-check"></i></button>';
            content += '    <button type="button" roleId="' + element.id + '" class="updateBtn btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil"></i></button>';
            content += '    <button type="button" roleId="' + element.id + '" class="deleteBtnClass btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove"></i></button>';
            content += '</td>';
            content += '</tr>';
        });
        $("tbody").html(content);
    }

    // 函数的方式拼数据
    function initShow2(result) {
        $("tbody").empty();
        $.each(result.list, function (index, element) {
            var tr = $('<tr></tr>');
            tr.append('<td>' + (index + 1) + '</td>');
            tr.append('<td><input type="checkbox"></td>');
            tr.append('<td>' + element.name + '</td>');
            var td = $('<td></td>');
            td.append(' <button type="button" class="btn btn-success btn-xs"><i class=" glyphicon glyphicon-check"></i></button>');
            td.append(' <button type="button" roleId="' + element.id + '" class="updateBtn btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil"></i></button>');
            td.append(' <button type="button" roleId="' + element.id + '" class="deleteBtnClass btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove"></i></button>');
            tr.append(td);
            tr.appendTo($('tbody'));
        })
    }

    // 展示分页条
    function initNavigate(result) {
        $(".pagination").empty();
        if (result.isFirstPage) {
            $(".pagination").append('<li class="disabled"><a>首页</a></li>');
        } else {
            $(".pagination").append('<li><a onclick="initDate(1)">首页</a></li>');
        }
        if (result.hasPreviousPage) {
            $(".pagination").append('<li><a href="#">上一页</a></li>');
        } else {
            $(".pagination").append('<li class="disabled"><a href="#">上一页</a></li>');
        }
        $.each(result.navigatepageNums, function (index, pageNum) {
            if (pageNum == result.pageNum) {
                $(".pagination").append('<li class="active"><a onclick="initDate(' + pageNum + ')">' + pageNum + '</a></li>');
            } else {
                $(".pagination").append('<li><a onclick="initDate(' + pageNum + ')">' + pageNum + '</a></li>');
            }
        })
        if (result.hasNextPage) {
            $(".pagination").append('<li><a onclick="initDate(' + result.nextPage + ')">下一页</a></li>');
        } else {
            $(".pagination").append('<li class="disabled"><a href="#">下一页</a></li>');
        }
        if (result.isLastPage) {
            $(".pagination").append('<li class="disabled"><a>末页</a></li>');
        } else {
            $(".pagination").append('<li><a onclick="initDate(' + result.pages + ')">末页</a></li>');
        }
    }

    $("#searchBtn").click(function () {
        var searchParam = $("#searchParamInput").val();
        dateJson.searchParam = searchParam;
        initDate(1);
    })

    $("#addBtn").click(function () {
        $("#addModal").modal({
            show: true,
            backdrop: 'static',
            keyboard: false,
        })
    });

    $("#saveBtn").click(function () {
        var val = $.trim($("#addModal input[name='name']").val());
        $.ajax({
            type: "post",
            url: "${ctp}/permission/role/addRole",
            data: {
                name: val,
            },
            beforeSend: function () {
                return true;
            },
            success: function (result) {
                console.log(result);
                if ("ok" == result) {
                    layer.msg("保存成功", {time: 1000}, function () {
                        $("#addModal").modal("hide");
                        // 为下次输入，清空输入框
                        $("#addModal input[name='name']").val("");
                        // 添加后刷新数据，跳到最后一页
                        initDate(9999);
                    });
                } else {
                    layer.msg("保存失败");
                }
            }
        })
    })

    $("tbody").on("click", ".updateBtn", function () {
        var id = $(this).attr("roleId");
        $.get("${ctp}/permission/role/getRoleById",
            {roleId: id,},
            function (result) {
                $("#updateModal").modal({
                    show: true,
                    backdrop: 'static',
                    keyboard: false,
                })
                $("#updateModal input[name='name']").val(result.name);
                $("#updateModal input[name='id']").val(result.id);
            }
        )
    });

    $("#updateBtn").click(function () {
        var name = $("#updateModal input[name='name']").val();
        var id = $("#updateModal input[name='id']").val();
        alert(name);
        $.post("${ctp}/permission/role/updateRole", {name: name, id: id}, function (result) {
            console.log(result);
            if (result == "ok") {
                layer.msg("更新成功！", {time: 1000}, function () {
                    $("#updateModal").modal("hide");
                    initDate(dateJson.pageNum);
                });
            } else {
                layer.msg("更新失败");
            }
        })
    })

    $("tbody").on('click', '.deleteBtnClass', function () {
        var roleId = $(this).attr("roleId");
        layer.confirm("您确认要删除吗？", {btn: ['确定', '取消']}, function (index) {
            $.post("${ctp}/permission/role/deleteRole", {roleId: roleId}, function (result) {
                if (result == "ok") {
                    layer.msg("删除成功！", {time: 1000}, function () {
                        initDate(dateJson.pageNum);
                    });
                } else {
                    layer.msg("删除失败！");
                }
            });
            layer.close(index);
        }, function (index) {
            layer.close(index);
        });
    });

    $("tbody .btn-success").click(function () {
        window.location.href = "assignPermission.html";
    });
</script>
</body>
</html>
